<template>
  <view class="home">
    <!-- 顶部的轮播 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in bannerArr" :key="index">
        <image class="img" :src="item.src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 学习课程分类 -->
    <view class="study">
      <view class="item" v-for="(item, index) in categoryArr" :key="index">
        <image class="img" :src="item.src" mode="scaleToFill" />
        <text class="title">{{ item.name }}</text>
      </view>
    </view>
    <!-- 热门课程组件 -->
    <v-card title="热门课程" subtitle="全部课程>">
      <template #content>
        <v-item :list="courseArr" type="course"></v-item>
      </template>
    </v-card>
    <!-- 展示老师的地方 -->
    <v-card title="名师大咖" subtitle="全部名师>">
      <template #content>
        <v-item :list="teacherArr" type="teacher"></v-item>
      </template>
    </v-card>
    <!-- 底部指定的组件 -->
    <v-back v-show="back"></v-back>
  </view>
</template>

<script setup lang="ts">
//首页banner与学习分类的数据
import { bannerCateList, hotCateList } from "@/mock/home";
import { ref } from "vue";
//页面生命周期函数
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import ajax from "@/api/index";
//首页轮播图
const bannerArr = ref(bannerCateList);
//学习分类
const categoryArr = ref(hotCateList);
//存储课程的数据
const courseArr = ref([]);
//老师的数据
const teacherArr = ref([]);

//控制返回组件显示与隐藏
const back = ref(false);
onLoad(() => {
  //获取首页的数据(课程与老师的数据)
  getHomeData();
});

const getHomeData = async () => {
  //获取首页的数据
  const result = await ajax.reqHome();
  if (result.code == 200) {
    courseArr.value = result.data.courseList;
    teacherArr.value = result.data.teacherList;
  }
};

//监听页面的滚动
onPageScroll((event) => {
  if (event.scrollTop >= 200) {
    back.value = true;
  }else{
    back.value = false;
  }
});
</script>

<style scoped>
.home {
  width: 100%;
}
.home .swiper {
  width: 100%;
  height: 300rpx;
}
.home .swiper .img {
  width: 100%;
  height: 100%;
}
.home .study {
  display: flex;
  padding: 20rpx;
}
.home .study .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home .study .item .img {
  width: 72rpx;
  height: 72rpx;
}
.home .study .item .title {
  color: hotpink;
}
</style>
